<template>
  <div class="home">
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 1rem' }">支出信息</van-divider>
    <van-form ref="payForm" :disabled="oper === 'view'">
      <div class="" v-for="(pay, idx) in pays" :key="idx">
        <van-field
          v-model="payTypeName"
          label="支付方式"
          readonly
          required
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showPicker1 = true"
        />
        <van-popup v-model:show="showPicker1" round position="bottom">
          <van-picker
            :columns="getDictList('ExpenditurePay')"
            :columns-field-names="{text: 'value', value: 'key'}"
            @cancel="showPicker1 = false"
            @confirm="onConfirmPicker1($event, pay)"
          />
        </van-popup>
        <van-field
          v-model="settleTypeName"
          label="结算方式"
          readonly
          required
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showPicker2 = true"
        />
        <van-popup v-model:show="showPicker2" round position="bottom">
          <van-picker
            :columns="getDictList('ExpenditureSettlement')"
            :columns-field-names="{text: 'value', value: 'key'}"
            @cancel="showPicker2 = false"
            @confirm="onConfirmPicker2($event, pay)"
          />
        </van-popup>
        <van-field
          v-model="payAccountName"
          label="支付账户"
          readonly
          required
          placeholder="请选择"
          input-align="right"
          right-icon="arrow"
          @click="showPicker3 = true"
        />
        <van-popup v-model:show="showPicker3" round position="bottom">
          <van-picker
            :columns="accountList"
            :columns-field-names="{text: 'accountName', value: 'id'}"
            @cancel="showPicker3 = false"
            @confirm="onConfirmPicker3($event, pay)"
          />
        </van-popup>
        <div class="form-label-per">
          <span class="form-label">收付标识</span>
          <van-radio-group v-model="pay.pay" direction="horizontal" disabled>
            <van-radio icon-size="1.25rem" :name="item.key" v-for="(item,index) in getEnumList('ExpenditurePay')" :key="index">{{item.value}}</van-radio>
          </van-radio-group>
        </div>
        <van-field
          v-model.number="pay.amount"
          label="金额"
          placeholder="请输入金额"
          input-align="right"
          type="number"
          disabled
        />
        <van-field
          v-model="pay.paySummary"
          rows="2"
          autosize
          label="摘要"
          type="textarea"
          placeholder="请输入摘要"
        />
      </div>
    </van-form>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 1rem' }">收款方信息</van-divider>
    <van-form ref="payeeForm" :disabled="oper === 'view'">
      <div class="" v-for="(payee, idx) in payees" :key="idx">
        <div class="form-label-per">
          <span class="form-label">收款类型</span>
          <van-radio-group v-model="payee.payeeType" direction="horizontal"  @change="changePayeeType" :disabled="oper === 'view'">
            <van-radio icon-size="1.25rem" v-for="(item,index) in getEnumList('ExpenditureReimbursementPayeeType')" :name="item.key" :key="index">{{item.value}}</van-radio>
          </van-radio-group>
        </div>
        <div class="" v-if="payee.payeeType === '1'">
          <van-field
            v-model="expenditureProceedsItemName"
            label="收款单位"
            readonly
            placeholder="请选择"
            input-align="right"
            right-icon="arrow"
            @click="showPicker4 = true"
          />
          <van-popup v-model:show="showPicker4" round position="bottom">
            <van-picker
              :columns="proceedsList"
              :columns-field-names="{text: 'name', value: 'id'}"
              @cancel="showPicker4 = false"
              @confirm="onConfirmPicker4($event, payee)"
            />
          </van-popup>
          <van-field
            v-model="payee.proceedsCompany"
            label="收款单位名称"
            placeholder="请输入收款单位名称"
            input-align="right"
          />
          <van-field
            v-model="bankName"
            label="收款银行"
            readonly
            placeholder="请选择"
            input-align="right"
            right-icon="arrow"
            @click="showPicker5 = true"
          />
          <van-popup v-model:show="showPicker5" round position="bottom">
            <van-picker
              :columns="bankList"
              :columns-field-names="{text: 'bankName', value: 'id'}"
              @cancel="showPicker5 = false"
              @confirm="onConfirmPicker5($event, payee)"
            />
          </van-popup>
          <van-field
            v-model="payee.proceedsAccount"
            label="收款账号"
            placeholder="请输入收款账号"
            input-align="right"
          />
        </div>
        <div class="" v-if="payee.payeeType === '2'">
          <van-field
            v-model="expenditureBusinessCardName"
            label="用户公务卡"
            readonly
            placeholder="请选择"
            input-align="right"
            right-icon="arrow"
            @click="showPicker6 = true"
          />
          <van-popup v-model:show="showPicker6" round position="bottom">
            <van-picker
              :columns="businessCardList"
              :columns-field-names="{text: 'cardName', value: 'id'}"
              @cancel="showPicker6 = false"
              @confirm="onConfirmPicker6($event, payee)"
            />
          </van-popup>
          <van-field
            v-model="payee.businessCardName"
            label="公务卡持有人"
            placeholder="请输入公务卡持有人"
            input-align="right"
          />
          <van-field
            v-model="businessCardBankName"
            label="开户行"
            readonly
            placeholder="请选择"
            input-align="right"
            right-icon="arrow"
            @click="showPicker7 = true"
          />
          <van-popup v-model:show="showPicker7" round position="bottom">
            <van-picker
              :columns="bankList"
              :columns-field-names="{text: 'bankName', value: 'id'}"
              @cancel="showPicker7 = false"
              @confirm="onConfirmPicker7($event, payee)"
            />
          </van-popup>
          <van-field
            v-model="payee.businessCardAccount"
            label="卡号"
            placeholder="请输入卡号"
            input-align="right"
          />
          <van-field
            v-model="payee.payeeSummary"
            rows="2"
            autosize
            label="摘要"
            type="textarea"
            placeholder="请输入摘要"
          />
        </div>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
import {doGet, doPost, doDownload} from '@/config/http'
import {parseTime} from "@/utils/ruoyi";
import {getUserId} from "@/config/cookie";
import useUserStore from "@/store/modules/user";
import {
  alertErrorMsg, alertWarningMsg,
  customValidator,
  getDictList,
  getEnumList, getEnv,
  getListPageSize, isNullOrUndefined, isNullOrUndefinedOrEmpty,
  notifySuccess,
  showIdLabel,
  svc
} from "@/config/common"
import initListStore from '@/store/modules/initList'

let oper = ref('')
let id = ref('')

let payForm = ref(null)
let payeeForm = ref(null)

let route = useRoute()
const emptyPay = {
  expenditureReimbursementId: null, // 报账单ID
  payType: null, // 支付方式
  settleType: null, // 结算方式
  payAccount: null, // 支付账户
  pay: '0', // 收付标识
  amount: null, // 金额
  paySummary: null, // 摘要
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
}
const emptyPayee = {
  expenditureReimbursementId: null, // 报账单ID
  payeeType: null, // 收款类型
  expenditureProceedsId: null, // 收款单位ID
  proceedsCompany: null, // 收款单位名称
  proceedsBank: null, // 收款银行
  proceedsAccount: null, // 收款账号
  expenditureBusinessCardId: null, // 公务卡持卡人用户ID
  businessCardName: null, // 公务卡持卡人
  businessCardBank: null, // 公务卡开户银行
  businessCardAccount: null, // 公务卡号
  payeeSummary: null, // 摘要
  id: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
  deleted: null,
  version: null,
}

let pays = ref([ Object.assign({}, emptyPay) ])
let payees = ref([Object.assign({}, emptyPayee) ])
let accountList = initListStore().accountList
let proceedsList = initListStore().proceedsList
let businessCardList = initListStore().businessCardList
let bankList = initListStore().bankList

let showPicker1 = ref(false)
let showPicker2 = ref(false)
let showPicker3 = ref(false)
let showPicker4 = ref(false)
let showPicker5 = ref(false)
let showPicker6 = ref(false)
let showPicker7 = ref(false)



let payTypeName = ref('')
let settleTypeName = ref('')
let payAccountName = ref('')
let expenditureProceedsItemName = ref('')
let bankName = ref('')
let expenditureBusinessCardName = ref('')
let businessCardBankName = ref('')

// const initList = async () => {
//   let p1 = doGet(svc, '/expenditure-account/page', {state: '1', pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/expenditure-proceeds/page', {state: '1', pageSize: getListPageSize()}, false)
//   let p3 = doGet(svc, '/expenditure-business-card/page', {state: '1', pageSize: getListPageSize()}, false)
//   let p4 = doGet(svc, '/bank/page', {state: '1', pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([ p1, p2, p3, p4])

//   accountList.value = resArray[0]['records']
//   proceedsList.value = resArray[1]['records']
//   businessCardList.value = resArray[2]['records']
//   bankList.value = resArray[3]['records']
// }

const emit = defineEmits(['updataExpenseInfo'])
const initObj = async () =>  {
  oper.value = route.query.oper
  id.value = null
  if (route.query.id) {
    id.value = route.query.id
    let obj = await doGet(svc, '/expenditure-reimbursement/' + id.value, {}, false)
    pays.value = await doGet(svc, '/expenditure-reimbursement-pay/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
    emptyPay.amount = obj.amount
    if (pays.value.length === 0) {
      pays.value.push(emptyPay)
    } else {
      if(pays.value[0].payType) {
        payTypeName.value = getDictList('ExpenditurePay').filter(item => item.key === pays.value[0].payType)[0].value
      }
      if(pays.value[0].settleType) {
        settleTypeName.value = getDictList('ExpenditureSettlement').filter(item => item.key === pays.value[0].settleType)[0].value
      }
      if(pays.value[0].payAccount) {
        payAccountName.value = accountList.value.filter(item => item.id === pays.value[0].payAccount)[0].accountName
      }
    }
    payees.value = await doGet(svc, '/expenditure-reimbursement-payee/listByField', {field: 'expenditureReimbursementId', values: id.value}, false)
    emptyPayee.amount = obj.amount
    console.log('payees',payees.value.length)
    if (payees.value.length === 0) {
      payees.value.push(emptyPayee)
    } else {

      if(payees.value[0].expenditureProceedsId) {
        expenditureProceedsItemName.value = proceedsList.value.filter(item => item.id === payees.value[0].expenditureProceedsId)[0].name
      }

      if(payees.value[0].proceedsBank) {
        bankName.value = bankList.value.filter(item => item.id === payees.value[0].proceedsBank)[0].bankName
      }

      if(payees.value[0].expenditureBusinessCard) {
        expenditureBusinessCardName.value = businessCardList.value.filter(item => item.id === payees.value[0].bankId)[0].cardName
      }

      if(payees.value[0].businessCardBank) {
        businessCardBankName.value = bankList.value.filter(item => item.id === payees.value[0].bankId)[0].bankName
      }

    }

    emit('updataExpenseInfo', pays.value, payees.value)
  }
}
// initList()
initObj()

// const changePayeeType = (o) => {
//   switch (o) {
//     case "1":
//       ruleForSupplement.value.expenditureProceedsId[0].required = true
//       ruleForSupplement.value.proceedsCompany[0].required = true
//       ruleForSupplement.value.proceedsBank[0].required = true
//       ruleForSupplement.value.proceedsAccount[0].required = true

//       ruleForSupplement.value.expenditureBusinessCardId[0].required = false
//       ruleForSupplement.value.businessCardName[0].required = false
//       ruleForSupplement.value.businessCardBank[0].required = false
//       ruleForSupplement.value.businessCardAccount[0].required = false
//       break
//     case "2":
//       ruleForSupplement.value.expenditureProceedsId[0].required = false
//       ruleForSupplement.value.proceedsCompany[0].required = false
//       ruleForSupplement.value.proceedsBank[0].required = false
//       ruleForSupplement.value.proceedsAccount[0].required = false

//       ruleForSupplement.value.expenditureBusinessCardId[0].required = true
//       ruleForSupplement.value.businessCardName[0].required = true
//       ruleForSupplement.value.businessCardBank[0].required = true
//       ruleForSupplement.value.businessCardAccount[0].required = true
//       break
//   }
// }

const onConfirmPicker1 = (data, item) => {
  console.log('data',data)
  item.payType = data.selectedValues[0]
  payTypeName.value = data.selectedOptions[0].value
  showPicker1.value = false
}
const onConfirmPicker2 = (data, item) => {
  item.settleType = data.selectedValues[0]
  settleTypeName.value = data.selectedOptions[0].value
  showPicker2.value = false
}

const onConfirmPicker3 = (data, item) => {
  console.log('data-----',data)
  item.payAccount = data.selectedValues[0]
  payAccountName.value = data.selectedOptions[0].accountName
  showPicker3.value = false
}
const onConfirmPicker4 = (data, item) => {
  let obj = data.selectedOptions[0]
  console.log('obj',obj)
  // item.expenditureProceedsItem = obj.id
  expenditureProceedsItemName.value = obj.name
 
  payees.value[0].expenditureProceedsId = obj.id;
  payees.value[0].proceedsCompany = obj.name;

  payees.value[0].proceedsBank = obj.bankId;
  payees.value[0].proceedsAccount = obj.account;
  payees.value[0].expenditureBusinessCardId = null;
  payees.value[0].businessCardName = null;
  payees.value[0].businessCardBank = null;
  payees.value[0].businessCardAccount = null;
  console.log('payees----------------------',payees.value)
  //  银行名称
  let bankObj = bankList.value.filter(item1 => item1.id === obj.bankId)
  bankName.value = bankObj[0].bankName
  showPicker4.value = false
}

const onConfirmPicker5 = (data, item) => {
  item.proceedsBank = data.selectedOptions[0].id
  bankName.value = data.selectedOptions[0].bankName
  showPicker5.value = false
}
const onConfirmPicker6 = (data, item) => {
  let obj = data.selectedOptions[0]
  item.expenditureProceedsItem = obj.key
  expenditureBusinessCardName.value = obj.cardName


  payees.value[0].expenditureProceedsId = null;
  payees.value[0].proceedsCompany = null;
  payees.value[0].proceedsBank = null;
  payees.value[0].proceedsAccount = null;
  payees.value[0].expenditureBusinessCardId = obj.id;
  payees.value[0].businessCardName = obj.cardName;
  payees.value[0].businessCardBank = obj.bankId;
  payees.value[0].businessCardAccount = obj.account;
  
  
    // 开户行
  let bankObj = bankList.value.filter(item1 => item1.id === obj.bankId)
  businessCardBankName.value = bankObj[0].bankName
  showPicker6.value = false


}
const onConfirmPicker7 = (data, item) => {
  item.businessCardBank = data.selectedOptions[0].id
  businessCardBankName.value = data.selectedOptions[0].bankName
  showPicker7.value = false
}

// let paysData = pays.value
// let payeesData = payees.value

async function handlepaysValidate() {
  return await payForm.value.validate().catch((err)=>{return err})
}

async function handlepayeesValidate() {
  return await payeeForm.value.validate().catch((err)=>{return err})
}

// console.log('payees.value',payees.value)

defineExpose({
  pays,
  payees,
  handlepaysValidate,
  handlepayeesValidate
})

</script>

<style scoped lang="scss">
.home {
  overflow: hidden;
  background: #eff2f5;
}
.select-list {
  // width: 100%;
  margin-top: 1.25rem;
  overflow: hidden;
  background: #fff;
  margin-top: .625rem;
}
.list {
  padding: .9375rem;
  border-bottom: 1px solid #ccc;
  
}
.list-content {
  margin: .3125rem 0;
  & span {
    font-size: 1rem
  };
}
.radio-group-wrapper {
  display: flex;
  justify-content: space-between; /* 或者使用其他对齐方式 */
  align-items: center;
}
/* 隐藏单选框的图标（如果需要的话，通常 Vant 的单选框默认没有图标） */
.img-icon {
  height: 0;
}
.form-label-per {
  display: flex;
  align-items: center;
  background: #fff;
  padding: .9375rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-label {
  color: var(--van-field-label-color);
  text-align: left;
  word-wrap: break-word;
  font-size: var(--van-cell-font-size);
  font-weight: 700;
  margin-left: 1.25rem;
}

</style>